<template>
  <div class="goodslist">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset:50
    >
      <van-row class="my-row">
        <van-col
          span="12"
          v-for="(el, index) in goods"
          :key="index"
          class="my-col"
        >
          <div class="img-box">
            <img v-lazy="el.img_url" />
            <h2>{{ el.title }}</h2>
            <p class="price">
              <span class="now">现价 ¥{{ el.sell_price }}</span>
              <span class="old">原价 ¥{{ el.market_price }}</span>
            </p>
            <p>
              <span>热卖中</span>
              <span>剩余{{ el.stock_quantity }}件</span>
            </p>
          </div>
        </van-col>
      </van-row>
    </van-list>
  </div>
</template>
<script>
export default {
  data: () => ({
    pageNo: 0,
    pageSize: 6,
    goods: [],
    loading: false,
    finished: false,
    count: 0
  }),
  methods: {
    async getGoods() {
      this.pageNo++
      const res = await this.$http.getGoods({ pageNo: this.pageNo, pageSize: this.pageSize })
      this.count = res.data.count
      this.goods = this.goods.concat(res.data.message)
      // if (this.goods.length >= this.count) {
      //   this.goods = this.goods.splice(this.count)
      // }
      // console.log(this.goods.splice(0, 13))
    },
    onLoad() {
      setTimeout(async () => {
        await this.getGoods()
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (this.goods.length >= this.count) {
          this.finished = true
        }
      }, 1000)
    }
  },
  created() {
  }
}
</script>
<style lang="scss" scoped>
.goodslist {
  padding: 5px;
  .my-row {
    .my-col {
      height: 258px;
      border: 1px solid #000;
    }
    .img-box {
      img {
        width: 150px;
        height: 150px;
      }
    }
  }
}
</style>
